<template>
  <view class="department-rules-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">部门制度</text>
        <text class="page-subtitle">管理制度查看</text>
      </view>
    </view>

    <!-- 搜索和筛选区域 -->
    <view class="search-section">
      <view class="search-form">
        <view class="form-item">
          <text class="form-label">文件夹名称:</text>
          <uni-easyinput v-model="queryParams.folderName" placeholder="请输入文件夹名称" :clearable="true"
            @input="handleQuery" />
        </view>
      </view>
    </view>

    <!-- MacosFileManager组件 -->
    <macos-file-manager :file-type="searchParams.fileType" :folder-name="searchParams.folderName" />
  </view>
</template>

<script>
import MacosFileManager from '@/components/macos-file-manager/macos-file-manager.vue'

export default {
  name: 'DepartmentRules',
  components: {
    MacosFileManager
  },
  data() {
    return {
      queryParams: {
        folderName: '',
        fileType: '97'
      },
      searchParams: {
        folderName: null,
        fileType: null
      }
    }
  },
  created() {
    // 直接设置搜索参数，触发接口调用
    this.searchParams = {
      folderName: this.queryParams.folderName,
      fileType: this.queryParams.fileType
    }
  },
  methods: {
    // 搜索
    handleQuery() {
      this.searchParams = {
        folderName: this.queryParams.folderName,
        fileType: this.queryParams.fileType
      }
    },

    // 重置搜索
    resetQuery() {
      this.queryParams.folderName = ''
      this.handleQuery()
    }
  }
}
</script>

<style lang="scss" scoped>
.department-rules-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* 页面标题 */
.page-header {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  padding: 60rpx 40rpx 80rpx;
  text-align: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30rpx;
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
    border-radius: 0 0 50% 50%;
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.page-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20rpx;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  letter-spacing: 2rpx;
  animation: slideInDown 0.8s ease-out;
}

.page-subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 1rpx;
  animation: slideInUp 0.8s ease-out 0.2s both;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 搜索区域 */
.search-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.search-form {
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .form-label {
    font-size: 28rpx;
    color: #333;
    width: 160rpx;
    flex-shrink: 0;
  }

  .form-input {
    flex: 1;
    height: 70rpx;
    padding: 0 20rpx;
    border: 2rpx solid #e5e7eb;
    border-radius: 8rpx;
    font-size: 28rpx;
    background: #f9fafb;

    &:focus {
      border-color: #1890ff;
      background: #fff;
    }
  }
}

.search-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;

  .search-btn,
  .reset-btn {
    flex: 1;
    height: 70rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    border: none;
  }

  .search-btn {
    background: #1890ff;
    color: #fff;
  }

  .reset-btn {
    background: #f5f5f5;
    color: #666;
  }
}
</style>